<!--
 * @Author: 可以清心
 * @Description: 
 * @Date: 2022-11-24 14:40:51
 * @LastEditTime: 2022-11-29 16:13:39
-->
<template>
    <div class="forget">
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="email">
                <el-input v-model="form.email" placeholder="邮箱"></el-input>
            </el-form-item>
            <el-form-item class="send-code-form-item">
                <el-input v-model="form.code" :disabled="disabled" placeholder="验证码" >
                </el-input>
                <el-button class="send-code" @click="sendEmailCode" type="primary">发送验证码</el-button>
            </el-form-item>
            <el-form-item prop="pass">
                <el-input placeholder="新密码" v-model="form.password" :disabled="disabled" show-password></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom: 12px;">
                <el-button class="forget-button" type="primary" @click="updatePassWord">修改密码</el-button>
            </el-form-item>
        </el-form>
        <div class="bottom">
            已有账号?<router-link to="/login">直接登录</router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'JdfForget',
        data(){
            return {
                form: {
                    email: '',

                },
                rules: {
                    email: [
                        {
                            validator: function(rule, value, callback){
                                if (!value) {
                                    return callback(new Error('邮箱不能为空!'));
                                }
                                setTimeout(() => {
                                    if(!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)){
                                        callback(new Error('请输入正确的邮箱'));
                                    }else{
                                        callback()
                                    }
                                }, 1000)
                            },
                            trigger: 'blur'
                        }
                    ],
                    pass: [
                        {
                            validator: function(rule, value, callback){
                                if (!value) {
                                    return callback(new Error('密码不能为空!'));
                                }
                            },
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        computed: {
            disabled(){
                const {email} = this.form;
                return email && /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email);
            }
        },
        methods: {
            sendEmailCode(){
                console.log(11111);
            },
            updatePassWord(){

            }
        }
    }
</script>

<style lang="less">
.forget {
    

    .forget-button{
        width: 100%;
        background: #005EBA;
        border-radius: 2px;
        color: #fff;
        font-size: 14px;
        // font-weight: 100;
        // letter-spacing: 1em;
    }

    .bottom{
        font-size: 14px;
        // font-weight: 100;
        float: right;
        a{
            text-decoration: none;
            color: #005EBA;
        }
    }

    .send-code-form-item{
        .el-form-item__content{
            display: flex;
        }

        .el-input{
            input[type="text"]{
                border-bottom-right-radius: 0 !important;
                border-top-right-radius: 0 !important;
            }
        }

        .send-code{
            background: #005EBA;
            border-radius: 2px;
            color: #fff;
            font-size: 14px;
            // font-weight: 100;
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }
    }
}
</style>